<template>
  <ElDescriptions :column="column" border>
    <ElDescriptionsItem label="名称">{{ name }}</ElDescriptionsItem>
    <ElDescriptionsItem label="标签">
      <el-input v-model="modelValue.label" />
    </ElDescriptionsItem>
    <ElDescriptionsItem  label="模式">
      <ElSelect v-model="modelValue.mode">
        <ElOption label="弹窗显示" value="popup" />
        <ElOption label="内容区显示" value="content" />
      </ElSelect>
    </ElDescriptionsItem>
    <!-- <ElDescriptionsItem label="位置">
      <ElSelect multiple v-model="modelValue.position" class="15vw">
        <ElOption label="导航栏" value="nav" />
        <ElOption label="个人中心" value="ucenter" />
        <ElOption label="菜单栏" value="menu" />
      </ElSelect>
    </ElDescriptionsItem> -->
    <ElDescriptionsItem label="图标">
      <IconPicker v-model="modelValue.icon" />
    </ElDescriptionsItem>
    <ElDescriptionsItem label="颜色">
      <el-color-picker v-model="modelValue.color" />
    </ElDescriptionsItem>
    <ElDescriptionsItem label="尺寸">
      <el-input v-model="modelValue.size" />
    </ElDescriptionsItem>
    <ElDescriptionsItem label="HOVER颜色">
      <el-color-picker v-model="modelValue.hoverColor" />
    </ElDescriptionsItem>
    <ElDescriptionsItem label="是否固定">
      <ElSwitch v-model="modelValue.affix" />
    </ElDescriptionsItem>
    <!-- <ElDescriptionsItem label="是否引藏">
      <ElSwitch v-model="modelValue.hidden" />
    </ElDescriptionsItem> -->
    <ElDescriptionsItem label="是否面包屑">
      <ElSwitch v-model="modelValue.breadcrumb" />
    </ElDescriptionsItem>
    <ElDescriptionsItem label="是否标签页">
      <ElSwitch v-model="modelValue.noTagsView" />
    </ElDescriptionsItem>
    <ElDescriptionsItem label="注释" :span="column">
      <el-input type="textarea" v-model="modelValue.comment" />
    </ElDescriptionsItem>
  </ElDescriptions>
</template>
<script setup lang="ts">
  import { IconPicker } from '@/components/IconPicker';
  import { HomeConfiguration } from '@/views/dev-types';
  import { ElDescriptions, ElDescriptionsItem, ElInput, ElSelect, ElOption, ElSwitch, ElColorPicker } from 'element-plus';

  defineProps<{name: string, modelValue: HomeConfiguration}>()
  const column = 2
</script>